<template>
	<view>
		<view v-if="getEnv" class="content">
			<view class="header">
				<view class="header-main">
					<!-- 地址 -->
					<view class="head" @click="chooseLocation">
						<image src="../../static/index/icon.png" mode=""></image>
						<text class="location">{{ schoolAddress.store_name }}</text>
						<uni-icons type="bottom"></uni-icons>
					</view>
					<!-- 搜索 -->
					<view class="text-area">
						<uni-search-bar radius="100" bgColor="#ededed" :focus="false" v-model="searchValue" clearButton="auto"
							cancelButton="none" style="width: 100%;" placeholder="输入商家名称或商品名称" readonly>
							<uni-icons slot="searchIcon" color="#999999" size="18" type="search" />
						</uni-search-bar>
						<view style="position: absolute;width:70%;height: 70%;" @click="JumpSearch"></view>
						<uni-badge class="uni-badge-left-margin" type="error" :text="value" absolute="rightTop" :offset="[20, 0]"
							size="small" :max-num="99">
							<image src="../../static/index/message.png" mode="" @click="goMsg"></image>
						</uni-badge>
					</view>
				</view>
			</view>
			<view class="swiper-main">
				<!-- 轮播图 -->
				<view class="uni-margin-wrap">
					<swiper class="swiper" circular indicator-active-color="#fff" :indicator-dots="indicatorDots"
						:autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item v-for="(item, index) in banner" :key="item.id">
							<image :src="$image + item.image" mode="widthFix" style="width: 100%;height: 100%;border-radius: 8rpx;">
							</image>
						</swiper-item>
					</swiper>
				</view>
				<!-- 轮播图 end-->
				<!-- 餐食，水果，下午茶，超市 -->
				<view class="list">
					<u-grid :col="5" :border="false">
						<u-grid-item v-for="(item, index) in list" :key="item.nav_id" @click="goResult(item, index)">
							<view class="choose">
								<image :src="$image + item.image" mode=""></image>
								<text>{{ item.nav_title }}</text>
							</view>
						</u-grid-item>

					</u-grid>
				</view>

			</view>

			<!-- 跑腿/代运 start -->
			<view class="mainMsg">
				<view class="left" @click="doing()">
					<view class="text">
						<view class="l-t">跑腿</view>
						<view class="l-b">跑腿代购</view>
					</view>
					<image src="../../static/index/waimai.png" mode=""></image>
				</view>
				<view class="right" @click="daiyun()">
					<view class="text">
						<view class="r-t">代运</view>
						<view class="r-b">搬运行李</view>
					</view>
					<image src="../../static/index/paotui.png" mode=""></image>
				</view>
			</view>
			<!-- 会员 -->
			<view class="vipContent" @click="JumpMember">
				<view class="vipLeft">
					<img src="../../static/index/vip.png" />
					<text class="vip">超级会员</text>
				</view>
				<view class="vipRight">
					<text class="little">已为我节省{{ form.use_total_money }}元</text>
				</view>
			</view>
			<!-- 秒杀 start -->
			<view class="discount" v-if="flashkilling">
				<view class="dis_Content">
					<view class="dis_l">
						<text class="dis_text">限时秒杀</text><text class="dis_fenge"></text>
						<u-count-down class="time" :timestamp="timestamp" separator-color="#fff" color="#F14553"></u-count-down>
					</view>
					<view class="dis_r" @click="goKilling(1)">
						<text class="dis_text">限时折扣，更优惠</text>
						<text class="dis_go">></text>
					</view>
				</view>
				<view class="dis_bt">
					<view class="describeContent" v-for="item in describe" :key="item.id" @click="JumpDetails(1, item)">
						<image :src="$image + item.goods_image" mode=""></image>
						<view class="describe">
							{{ item.goods_name }}
						</view>
						<view class="price">
							<text class="pri_o">￥</text><text class="pri_s">{{ item.seckill_price }}</text>
							<text class="pri_t">￥{{ item.price }}</text>
						</view>
					</view>
				</view>


			</view>
			<!-- 秒杀 end -->

			<!-- 拼团 start -->
			<view class="team" v-if="piecingTogetherAGroup">
				<view class="t_t">
					<view class="t_l">
						今日拼团
					</view>
					<view class="t_r">
						<text class="tr_text" @click="goKilling(2)">查看更多</text>>
					</view>
				</view>
				<view class="t_bt">
					<view class="t_Content" v-for="item in teamList" :key="item.goods_id" @click="JumpDetails(2, item)">
						<image :src="$image + item.goods_image" mode=""></image>
						<view class="t_describe">
							<text class="pintuantitle">{{ item.goods_name }}</text>
							<text class="personNum">{{ item.pintuan_num }}人团</text>
						</view>
						<view class="t_price">
							<text class="tpri_o">￥{{ item.pintuan_price }}</text>
							<text class="tpri_t">￥{{ item.price }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 拼团 end -->

			<!-- 商家 start -->
			<view class="business">
				<view class="bus_title">附近商家</view>
				<scroll-view ref="tabbar1" id="tab-bar" class="tab-bar" :scroll="false" :scroll-x="true" :show-scrollbar="false"
					:scroll-into-view="`id` + current">
					<view class="tab-list">
						<view :id="`id` + index" class="tab-item-wrapper" v-for="(item, index) in navList" :key="item.id">
							<view class="tab-item" @click="tabsChange(index, item.id)">
								<view :class="current == index ? 'item-active' : ''">
									{{ item.text }}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="">
					<ShopList :list="businessList"></ShopList>
					<u-loadmore :status="status" />
				</view>

			</view>
			<!-- 商家 end -->
			<Activity></Activity>
		</view>
		<DeceiveIndex v-else></DeceiveIndex>
	</view>
</template>

<script>
import DeceiveIndex from "@/components/Deceive/DeceiveIndex.vue";
import getEnv from "@/utils/getEnv.js";

import ShopList from '@/components/ShopList/index.vue'
import Activity from './Activity.vue'
const $api = require('../../utils/request.js').API

export default {
	components: {
		ShopList,
		Activity,
		DeceiveIndex
	},
	data() {
		return {
			getEnv: getEnv(),
			value: 0,	// 消息未读数量
			schoolAddress: {}, // 地址
			banner: [], // 轮播图
			list: [],
			searchValue: '',
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			couponNum: 0,	// 多少张优惠券
			saveMoney: 0,	// 超级会员
			timestamp: 0, //倒计时/
			describe: [], //秒杀
			flashkilling: false,
			piecingTogetherAGroup: false,
			teamList: [], //拼团
			navList: [
				{
					text: '默认排序',
					id: 2
				},
				{
					text: '离我最近',
					id: 1
				},

				// {
				// 	text: '减配送费',
				// 	id: 3
				// },
				// {
				// 	text: '打折优先',
				// 	id: 4
				// },
			],
			businessList: [], // 附近商家
			// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			page: 1,
			page_count: 0,
			status: 'loading',
			longitude: null, //经度
			latitude: null, //纬度
			$image: this.$image,
			// 会员
			form: {
				is_super: false,
				use_total_money: 0,
				level_info: {
					coupon_num: 6
				}
			}
		}
	},
	onLoad(options) {
		this.swiper()	// 轮播图
		this.postNav()	// 导航
		this.postFlashKillTimePeriod() // 秒杀时间段
		this.GroupProductList() // 今日拼团
		this.messageList()	// 消息列表
		this.getLocationsFun();
		this.membercardMember_info()
	},
	onShow() {
		if (uni.getStorageSync('selectSchool')) {
			this.schoolAddress = uni.getStorageSync('selectSchool')
		} else {
			this.schoolAddress.store_name = '请选择地址'
		}
	},
	onReachBottom() {
		if (this.page >= this.page_count) {
			this.status = 'nomore'
		} else {
			this.page = this.page + 1
			this.storeList()
		}
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {// 来自页面内分享按钮
			console.log(res, '4');
		}
		return {
			title: '校宇通',
			path: '/pages/index/index'
		}
	},
	onShareTimeline(res) {
		return {
			title: '校宇通',
			query: '/pages/index/index',
		}
	},
	methods: {
		// 获取会员卡信息
		membercardMember_info() {
			$api.membercardMember_info({}).then(res => {
				if (res.data.data.is_super) {
					this.form = res.data.data
				}
			})
		},

		// 轮播图
		swiper() {
			$api.postSwiper({
				site_id: 0
			}).then(res => {
				if (res.data.code == 0) {
					this.banner = res.data.data
				}
			})
		},
		// 导航
		postNav() {
			$api.postNav({}).then(res => {
				// let obj = res.data.data
				// obj.forEach(item => {
				// let str = JSON.parse(item.nav_url).wap_url
				// })
				this.list = res.data.data
			})
		},
		// 店铺列表
		storeList(order) {
			$api.postStoreList({
				order: order,
				lat: this.latitude,//  纬度
				lng: this.longitude, //  经度
				page: this.page,
			}).then(res => {
				if (res.data.code == 0) {
					if (this.page == 1) {
						this.businessList = res.data.data.list
					} else {
						this.businessList = [...this.businessList, ...res.data.data.list]
					}
					this.page_count = res.data.data.page_count
				}
			})
		},
		postFlashKillTimePeriod() {
			let now = new Date();
			// 获取当前时间的年月日时分秒
			let nowYear = now.getFullYear();
			let nowMonth = this.checked(now.getMonth() + 1);
			let nowDate = this.checked(now.getDate());
			let nowHours = this.checked(now.getHours());
			let nowMinutes = this.checked(now.getMinutes());
			let nowSeconds = this.checked(now.getSeconds());
			let currentTimestamp = now.getTime() / 1000;

			$api.postFlashKillTimePeriod({}).then(res => {
				this.timestamps = res.data.data.list;
				let found = false; // 标记是否已经找到符合条件的秒杀场次
				for (let i = 0; i < this.timestamps.length; i++) {
					let item = this.timestamps[i];
					let startDate = new Date(nowYear, nowMonth - 1, nowDate, item.seckill_start_time_show.split(':')[0], item.seckill_start_time_show.split(':')[1], item.seckill_start_time_show.split(':')[2]);
					let endDate = new Date(nowYear, nowMonth - 1, nowDate, item.seckill_end_time_show.split(':')[0], item.seckill_end_time_show.split(':')[1], item.seckill_end_time_show.split(':')[2]);
					// 如果当前时间在秒杀时间内，设置倒计时并开始秒杀
					if (startDate <= now && now < endDate) {
						let startTimeStamp = Date.parse(startDate) / 1000;
						this.timestamp = startTimeStamp + item.seckill_end_time - currentTimestamp;
						this.flashkilling = true;
						this.postFlashKilling(item.id);
						found = true;
						break; // 找到符合条件的秒杀场次后立即退出循环
					}
				}
				if (!found) {
					console.log("当前没有正在进行的秒杀场次");
					// TODO: 给用户提示
				}
			});
		},
		checked(j) {
			return j < 10 ? '0' + j : j
		},
		// 限时秒杀
		postFlashKilling(id) {
			let obj = {
				site_id: 0,
				seckill_id: id,
			}
			$api.postFlashKilling(obj).then(res => {
				if (res.data.code == 0) {
					this.describe = res.data.data.list.slice(0, 4);
				}
			})
		},
		// 今日拼团
		GroupProductList() {
			$api.postGroupProductList({
				site_id: 0,
			}).then(res => {
				this.teamList = res.data.data.list.slice(0, 4);
				this.piecingTogetherAGroup = res.data.data.count != 0 ? true : false
			})
		},
		JumpDetails(e, item) {
			uni.navigateTo({
				url: '../../pages/Productdetails/Productdetails?source=' + e + '&item=' + JSON.stringify(item)
			})
		},
		//点击去选择学校地点
		chooseLocation() {
			this.isActive = !this.isActive;
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages_index/index/location'
				})
			}, 300)
		},
		//搜索
		JumpSearch() {
			uni.navigateTo({
				url: '../../pages_index/index/search'
			})
		},
		messageList() {
			$api.postMessageList({}).then(res => {
				let is_seed = 0
				// is_seed	0未查看	1已查看
				res.data.data.list.filter(item => {
					is_seed += item.is_seed === 0
				})
			})
		},
		//查看消息
		goMsg() {
			uni.navigateTo({
				url: '/pages_index/index/message'
			})
		},
		goOrder(item) {
			uni.navigateTo({
				url: '/pages_order/order/order?site_id=' + item.site_id
			})
		},
		//搜索结果
		// 餐食，水果，下午茶，超市
		goResult(item, index) {
			uni.navigateTo({
				url: '/pages_index/index/searchResult?source=' + index + '&item=' + JSON.stringify(item)
			})
		},
		//跑腿
		doing() {
			uni.navigateTo({
				url: '/pages_runErrands/runErrands'
			})
		},
		daiyun() {
			uni.navigateTo({
				url: '/pages_runErrands/FreightForwarder'
			})
		},
		//去秒杀 source：1秒杀 2拼团
		goKilling(v) {
			uni.navigateTo({
				url: '/pages_index/index/teamAndKilling?source=' + v
			})
		},
		// 会员
		JumpMember() {
			uni.navigateTo({
				url: '/pages_InviteMembers/InviteMembers/member'
			})
		},
		// 附近商家
		tabsChange(index, id) {
			this.current = index;
			if (id == 1) {
				this.storeList('distance')
			} else if (id == 2) {
				this.storeList('sort')
			}
		},
		getLocationsFun() {
			var that = this;
			uni.getLocation({
				type: 'wgs84',
				success: function (res) {
					that.longitude = res.longitude;
					that.latitude = res.latitude;
					that.storeList()	// 店铺列表
				}
			});
		},
	},

}
</script>

<style lang="less" scoped>
::v-deep .uni-searchbar__box {
	justify-content: flex-start;
}

.header {
	padding-bottom: 235rpx;
	background: #fae472;

	.header-main {
		position: fixed;
		width: 100%;
		// height: 235rpx;
		// height: 255rpx;
		top: 0;
		left: 0;
		z-index: 99;
		background: #fae472;


		// 地址定位
		.head {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: left;
			margin-top: 60rpx;
			padding-left: 32rpx;

			image {
				display: inline-block;
				width: 28rpx;
				height: 34rpx;
			}

			.location {
				display: inline-block;
				// width: 320rpx;
				margin-left: 10rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
				// line-height: 28rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				// background: pink;
			}

			.chooseLocation {
				display: inline-block;
				color: #666;
				transform: rotate(90deg);
			}
		}
	}

}

// 轮播图
.swiper-main {
	width: 100%;
	background: white;
}

.item-active {
	color: #fff;
	background: #F14500;
	border-radius: 8rpx;
}

.tab-bar {
	height: 44rpx;

	.tab-list {
		display: flex;
		// justify-content: space-between;
		align-items: center;
		height: 100%;

		.tab-item-wrapper {
			display: flex;
			flex-shrink: 0;
			justify-content: center;
			align-items: flex-end;
			height: 100%;
			margin-right: 20rpx;

			.tab-item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 144rpx;
				height: 44rpx;
				border-radius: 8rpx;
				color: #161415;
				background: white;
				border-radius: 8rpx;
				text-align: center;
				font-size: 24rpx;
				line-height: 44rpx;

				view {
					width: 100%;
					height: 100%;
				}
			}
		}

	}
}

.u-mode-light-primary.active {
	color: #fff;
	background: #F14500;
}

.u-mode-light-primary {
	display: inline-flex;
	justify-content: space-around;
	background: none;
	border: none;
	width: 144rpx;
	height: 44rpx;
	border-radius: 8rpx;
	color: #161415;
	border-radius: 8rpx;
	text-align: center;
	font-size: 24rpx;
	line-height: 44rpx;
}

.business {
	// width: 100%;
	margin: 0 24rpx;

	.bus_title {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 95rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #161415;
	}

	.nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18rpx;
		height: 44rpx;
	}


}

.team {
	margin: 0 24rpx;
	margin-top: 12rpx;
	// width: 100%;
	height: 359rpx;
	background: #FFFFFF;
	border-radius: 10rpx;

	.t_t {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 80rpx;

		.t_l {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #161415;
		}

		.t_r {
			font-size: 22rpx;
			color: #6D6D6D;

			.tr_text {
				font-size: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #6D6D6D;
			}
		}
	}

	.t_bt {
		display: flex;
		// justify-content: space-between;

		.t_Content {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-around;
			border: 1px solid #F9F9F9;
			border-radius: 10rpx;
			padding: 9rpx;
			width: 221rpx;
			height: 262rpx;

			image {
				width: 200rpx;
				height: 156rpx;
				border-radius: 10rpx 10rpx 0px 0px;
			}

			.tpri_t {
				margin-left: 12rpx;
				font-size: 18rpx;
				font-family: PingFang SC;
				font-weight: 500;
				text-decoration: line-through;
				color: #99989D;
			}

			.tpri_o {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #F14500;
			}
		}

		.t_describe {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			margin-top: 10rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #161415;

			.pintuantitle {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.personNum {
				display: inline-block;
				margin-left: 8rpx;
				min-width: 68rpx;
				height: 26rpx;
				border: 1px solid #E54100;
				text-align: center;
				border-radius: 4rpx;
				font-size: 18rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 26rpx;
				color: #F14500;
				text-shadow: 0rpx 5rpx 50rpx rgba(197, 197, 197, 0.54);
			}
		}
	}
}

.content {
	// display: flex;
	// flex-direction: column;
	// align-items: center;
	// justify-content: center;
	// // margin: 0 24rpx;
	// padding: 0 24rpx;
	background: #FAF9F7;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

// 搜索
.text-area {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;

	// padding-top: 20rpx;
	image {
		display: inline-block;
		width: 42rpx;
		height: 38rpx;
		// padding-right: 27rpx;
		padding-right: 35rpx;
	}
}

.uni-searchbar {
	width: 90%;
}

.uni-searchbar {
	padding: 10px 10px 10px 0;

}

.uni-searchbar__box-search-input {
	color: #A4A4A4;
}

.uni-margin-wrap {
	width: 100%;
	padding-top: 60rpx;
}

.swiper {
	height: 280rpx;
	border-radius: 8rpx;
}

.swiper-item {
	display: block;
	height: 280rpx;
	line-height: 280rpx;
	text-align: center;
	border-radius: 8rpx;
}

.swiper-list {
	margin-top: 40rpx;
	margin-bottom: 0;
}

.uni-common-mt {
	margin-top: 60rpx;
	position: relative;
}

.info {
	position: absolute;
	right: 20rpx;
}

.uni-padding-wrap {
	width: 550rpx;
	padding: 0 100rpx;
}

.uni-margin-wrap img {
	// display: inline-block;
	width: 100%;
	height: 100%;
}

.list {

	background: white;

	image {
		width: 106rpx;
		height: 106rpx;
		border-radius: 106rpx;
	}

	.choose {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #686868;
		line-height: 38rpx;
	}

	.choose:first-child {
		margin-left: 12px;
	}

	.choose:last-child {
		margin-right: 12px;
	}
}

.mainMsg {
	display: flex;
	align-items: center;
	justify-content: space-between;
	// width: 100%;
	margin: 0 24rpx;
	margin-top: 20rpx;

	.left,
	.right {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 340rpx;
		height: 128rpx;
		border-radius: 10rpx;
		background-color: #fff;

		img {
			margin-left: 90rpx;
			width: 104rpx;
			height: 104rpx;
		}

		image {
			margin-left: 90rpx;
			width: 104rpx;
			height: 104rpx;
		}
	}

	.l-t,
	.r-t {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.l-b,
	.r-b {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #91908E;
		line-height: 29px;
	}
}


.vipContent {
	display: flex;
	justify-content: space-between;
	align-items: center;
	// width: 100%;
	height: 72rpx;
	// margin: 20rpx 0 15rpx 0;
	margin: 15rpx 24rpx;
	padding: 0 15rpx 0 26rpx;
	background-color: #EDDDA9;
	border-radius: 10rpx;

	.vipLeft {
		display: flex;
		align-items: center;
		justify-content: center;

		img {
			margin-right: 12rpx;
			width: 33rpx;
			height: 29rpx;
		}

		image {
			margin-right: 12rpx;
			width: 33rpx;
			height: 29rpx;
		}

		.vip {
			font-size: 31rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #605127;
			line-height: 40rpx;
		}

	}

	.vipRight {
		display: flex;
		align-items: center;
		justify-content: center;

		.couponNum {
			margin-right: 2rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #B18E38;
			line-height: 43rpx;
		}

		.go {
			margin-left: 7rpx;
			color: #605127;
			;
		}
	}

	.little {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #817044;
	}
}

.discount {
	// width: 100%;
	margin: 0 24rpx;
	height: 387rpx;
	background: #fae472;
	border-radius: 10rpx;
	padding: 0 9rpx 15rpx 9rpx;

	.dis_Content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 13rpx;
		height: 83rpx;
		color: #fff;

		.dis_l {
			display: flex;
			align-items: center;
			justify-content: center;

			.dis_text {
				float: left;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 35rpx;
			}

			.dis_fenge {
				display: inline-block;
				margin: 0 23rpx;
				width: 2rpx;
				height: 50rpx;
				background: #fff;
			}

			.time {
				display: inline-flex;
				width: 36rpx;
				height: 36rpx;
				border-radius: 5rpx;
				font-size: 25rpx;
				font-family: PingFang SC;
				font-weight: 400;
				text-align: center;
			}
		}

		.dis_r {
			display: flex;
			align-items: center;
			justify-content: center;

			.dis_go {
				margin-left: 10rpx;
			}

			.dis_text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 35rpx;
			}
		}
	}

	.dis_bt {
		display: flex;
		align-items: center;
		// justify-content: space-around;
		height: 289rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 14rpx 9rpx 23rpx 9rpx;

		.describeContent {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-around;
			width: 150rpx;
			height: 100%;
			margin-right: 20rpx;

			image {
				display: inline-block;
				width: 150rpx;
				height: 122rpx;
				border-radius: 5rpx 5rpx 0 0;
			}

			.describe {
				width: 100%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 35rpx;

				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.price {
				display: flex;
				align-items: center;
				// width: 122rpx;
				height: 36rpx;
				padding-left: 5rpx;
				background-image: url(../../static/index/bg.png);
				background-size: 100% 36rpx;

				.pri_o {
					margin-top: 10rpx;
					font-size: 20rpx;
					color: #fff;
				}

				.pri_s {
					// font-size: 30rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				.pri_t {
					margin-left: 6px;
					font-size: 20rpx;
					text-decoration: line-through;
					color: #B56400;
				}
			}

		}
	}
}

.uni-badge-left-margin {
	margin-left: 10px;
}

.box {
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: #DCDFE6;
	color: #fff;
	font-size: 12px;
}
</style>